<template>
  <el-dialog
    title="查看限额使用情况列表"
    :visible.sync="dialogVisible"
    width="60%"
    :close-on-click-modal="false"
  >

    <div>
      <d2-crud-x
        ref="d2Crud"
        :options="mainTable.options"
        :index-row="mainTable.indexRow"
        :columns="mainTable.columns"
        :data="mainTable.list"
        :selection-row="mainTable.allowSelect"
        :rowHandle="mainTable.rowHandle"
        :loading="mainTable.loading"
        @current-change="onMainCurrentChange"
        @row-dblclick="onMainDoubleClick"
        @custom-emit-handle-channel-set="handleChannelSet"
        @custom-emit-handle-channel-exit="handelExit"
      ></d2-crud-x>
      <template slot="footer">
        <el-pagination
          @size-change="handleMainSizeChange"
          @current-change="handleMainPageChange"
          :current-page="mainTable.pagination.currentPage"
          :page-sizes="mainTable.pagination.pageSizes"
          :page-size="mainTable.pagination.pageSize"
          :page-count="mainTable.pagination.pageCount"
          :total="mainTable.pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          :background="true"
        >
        </el-pagination>
      </template>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close" size="small">关 闭</el-button>
    </div>

    <dialog-channel-limit
      ref="dialog-channel-limit"
      @dialog-close="fetchMainData"
    ></dialog-channel-limit>
  </el-dialog>
</template>

<script>
import ApiMain from '@/api/mch.ter';
import DialogChannelLimit from './dialog-channel-limit';
export default {
  components: {
    DialogChannelLimit
  },
  mixins: [
  ],
  props: [
  ],
  data() {
    return {
      mainTable: {
        loading: false,
        options: {
          border: true,
          stripe: true,
          highlightCurrentRow: true,
          emptyText: '暂无数据',
          size: 'mini',
        },
        indexRow: null,
        allowSelect: false,
        columns: [
          { title: '通道集合', key: 'collectionName', align: 'center', showOverflowTooltip: true },
          { title: '通道名称', key: 'channelName', align: 'center', showOverflowTooltip: true },
          { title: '调度级别', key: 'channelSort', align: 'center', showOverflowTooltip: true },
          { title: '状态', key: 'statusTxt', align: 'center', showOverflowTooltip: true },          
          { title: '当日次数消耗', key: 'dayCurrentCount', align: 'center', showOverflowTooltip: true },
          { title: '当月次数消耗', key: 'monthCurrentCount', align: 'center', showOverflowTooltip: true },
          { title: '当日金额消耗', key: 'dayCurrentAmount', align: 'center', showOverflowTooltip: true },
          { title: '当月金额消耗', key: 'monthCurrentAmount', align: 'center', showOverflowTooltip: true },
          { title: '最小金额限制', key: 'amountMin', align: 'center', showOverflowTooltip: true },
          { title: '最大金额限制', key: 'amountLimit', align: 'center', showOverflowTooltip: true },
          { title: '当日限制次数', key: 'dayCountLimit', align: 'center', showOverflowTooltip: true },
          { title: '当月限制次数', key: 'monthCountLimit', align: 'center', showOverflowTooltip: true },
          { title: '当日金额限制', key: 'dayAmountLimit', align: 'center', showOverflowTooltip: true },
          { title: '当月金额限制', key: 'monthAmountLimit', align: 'center', showOverflowTooltip: true },
          { title: '当日限制金额阈值', key: 'dayAmountThreshold', align: 'center', showOverflowTooltip: true },
          { title: '当月限制金额阈值', key: 'monthAmountThreshold', align: 'center', showOverflowTooltip: true },
          
         
        ],
        rowHandle: {
          width: '230',
          align: 'center',
          fixed: 'right',
          custom: [
            {
              text: '设置限额',
              type: 'primary',
              size: 'mini',
              emit: 'custom-emit-handle-channel-set'
            },
            {
              text:(scope)=>{
                return  scope.row.status == 0 ? '开启通道' : '关闭通道'}, 
              type:(scope)=>{
                return  scope.row.status == 0 ? 'primary' : 'warning'}, 
              size: 'mini',
              emit: 'custom-emit-handle-channel-exit'
            }

          ]
        },
        list: [],
        pagination: {
          currentPage: 1,
          pageSize: 50,
          total: 0,
          pageSizes: [50, 100, 200]
        },
      },
      dialogVisible: false,
      data: []

    }
  },

  methods: {
    handelExit(item) {
      console.log("关闭通道", item)
      if(item.row.status == null ) return this.$message({ message: '暂未设置通道限额', type: 'warning' });
      this.submitStatus(item.row.mchNo, item.row.channelNo, item.row.status == 1 ? 0 : 1)
    },
    handleChannelSet(row) {
      console.log(row)
      this.$refs['dialog-channel-limit'].show(row.row.mchNo,row.row.channelNo,row.row);
    },
    renderMainData(re) {
      // 处理数据
      console.log(re,"1212")

      re.list.forEach(item=>{
        console.log(item)
            item.amountMin = item.amountMin / 100
            item.amountLimit = item.amountLimit / 100,
            item.dayAmountLimit = item.dayAmountLimit / 100
            item.monthAmountLimit = item.monthAmountLimit / 100
            item.dayAmountThreshold = item.dayAmountThreshold 
            item.monthAmountThreshold = item.monthAmountThreshold 
            item.dayCurrentAmount = item.dayCurrentAmount / 100
            item.monthCurrentAmount = item.monthCurrentAmount / 100
      })


      this.mainTable.list = re.list;
      this.mainTable.pagination.total = re.total;
    },

    handleSearch() {
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData();
    },
    handleMainSizeChange(val) {
      this.mainTable.pagination.pageSize = val;
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData()
    },
    handleMainPageChange(val) {
      this.mainTable.pagination.page = val;
      this.fetchMainData()
    },

    buildMainQuery() {

      var query = {
        page: this.mainTable.pagination.currentPage,
        limit: this.mainTable.pagination.pageSize,
        search: this.mainQuery,
      };

      return query;
    },

    resetMainData() {

      this.mainQuery = {
        mchName: undefined,
        mchNo: undefined,
      };

      this.fetchMainData();
    },

    async fetchMainData() {

      this.mainTable.loading = true;

      try {
        var re = await ApiMain.channelList({search:{ mchNo: this.id}});
        this.renderMainData(re);
      } catch (err) { }

      this.mainTable.loading = false;

    },

    onMainCurrentChange(now, old) {
      this.mainTable.current = now;
    },

    onMainDoubleClick(now) {
      this.mainTable.current = now;
      this.handleSet();
    },
    show(id = null) {

      this.id = id;

      if (this.id) {
        this.fetchMainData()
      }

      this.dialogVisible = true;
    },

    close() {
      this.dialogVisible = false;
      this.$emit('dialog-close');
    },

    fetchData() {
      ApiMain.channelUsed({ mchNo: this.id, channelNo: this.id })
        .then(re => {
          this.data = re;
        })
        .catch(() => {
          this.data = null;
        })
        .finally(() => {
          this.renderData();
        });
    },

    renderData() {
      console.log(this.data)
    },

    refresh() {
      this.fetchMainData();
      this.$message({ message: '已刷新', type: 'success' });
    },
    submitStatus(mchNo, channelNo, status) {
      this.$confirm(status == 0 ? '确定操作关闭通道?此操作将会将该通道关闭，当日内不能产生交易' : '确定操作开启通道？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // this.loading = true;
        try {
          ApiMain.channelStatus({ mchNo: mchNo, channelNo: channelNo, status: status });
        } finally {
          // this.loading = false;
        }
        this.refresh()
        // this.close();
        this.$message({ message: '操作成功', type: 'success' });
      });
    },

  }
}
</script>